<template>
  <h1>{{ msg }}</h1>


  <button type="button" @click="count=count+2">count is: {{ count }}</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

//定义一个接口
interface IPerson {
	firstName: string
	lastName: string
}
//输出姓名
function showFullName(person: IPerson){
	return person.firstName + person.lastName
}

const burt = {
	firstName: '杨',
	lastName: '利龙'
}
console.log(showFullName(burt))

class Person {
	firstName: string //姓氏
	lastName: string //名字
	fullName: string
	constructor(firstName:string,lastName:string){
		this.firstName = firstName
		this.lastName = lastName
		this.fullName = this.firstName + '-' + this.lastName
	}
}
const person = new Person('yang', 'burt')
console.log(showFullName(person))

//枚举
enum Color{
    red = 1,
    green = 2,
    blue = 5
}
console.log(Color[5])

function showMsg():void{
	console.log('只要富婆把握住，连夜搬进大别墅')
}
showMsg();


function getObj(obj:object):object{
	console.log(obj)
	return {
		name: 'burt',
		age: 29
	}
}
getObj({})


//类型断言
function getObj2(str:string|number):number{
	if((<string>str).length){
		return (str as string).length
	}else{
		return str.toString().length
	}
}
console.log(getObj2(123))

//类型推断
let num
num = 'burt'


//接口
interface IPerson2{
    readonly id: number;
    name: string;
    age: number;
    sex?: string;
}
const person2:IPerson2 = {
    id: 1,
    name: 'burt',
    age: 29,
    sex: '男'
}
console.log(person2);
person2.name = 'burtyang';


interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];
console.log(myStr,  1111)

//索引接口
interface StringArray2 {
    //索引签名
    [index: number]: string;
}
let strArr2: StringArray2 = ['burt', 'connie'];
let str:string = strArr2[0];  //得到的是 'burt'

interface StringArray3 {
    //索引签名
    [index: string]: string;
}
let strArr3: StringArray3 = {
	name: 'burtyang',
	age: '29'
};
let str3:string = strArr3['name'];  //得到的是 'burtyang'
interface StringArray5 {
    //索引签名
    [index: string]: number;
	length: number,
	//name: string //这会报错
}


interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

let counter = <Counter>function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
counter(10)
console.log(counter.interval, 22323)


</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
